<template>
  <div class="todo-list-page">
    <h2>待办事项列表</h2>
    <!-- 自动化测试截图展示 -->
    <div class="test-screenshot">
      <h3>自动化测试截图</h3>
      <img src="../assets/test-screenshot.png" alt="自动化测试截图" />
    </div>
    <TodoForm @add-task="addTask" />
    <ul class="todo-list">
      <TodoItem 
        v-for="task in tasks" 
        :key="task.id" 
        :task="task" 
        @toggle-complete="toggleComplete"
        @delete-task="deleteTask"
      />
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TodoForm from './TodoForm.vue'
import TodoItem from './TodoItem.vue'

const tasks = ref([
  { id: 1, text: '学习 Vue 3 组合式 API', completed: false },
  { id: 2, text: '完成 TodoList 开发', completed: false },
  { id: 3, text: '测试路由守卫功能', completed: false }
])

const addTask = (text) => {
  tasks.value.push({
    id: Date.now(),
    text,
    completed: false
  })
}

const toggleComplete = (taskId) => {
  const task = tasks.value.find(t => t.id === taskId)
  if (task) {
    task.completed = !task.completed
  }
}

const deleteTask = (taskId) => {
  tasks.value = tasks.value.filter(t => t.id !== taskId)
}
</script>

<style scoped>
.todo-list-page {
  padding: 20px;
}
h2 {
  color: #333;
  margin-bottom: 15px;
}
.todo-list {
  list-style: none;
  padding: 0;
}
.test-screenshot {
  margin-bottom: 20px;
}
.test-screenshot img {
  max-width: 100%;
  height: auto;
}
</style>